<template>
  <div class="container-questions">
    <el-card>
      <!-- 筛选 -->
      <el-row type="flex" justify="end">
        <!-- 按钮 -->
        <el-button
          style="float: right;margin-bottom:15px"
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('new')"
        >新增试题</el-button>
      </el-row>
      <el-form label-width="80px" size="small">
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="formData.subjectID"
                prop="subjectID"
                placeholder="请选择"
                style="width: 99%"
                @change="changeSubject"
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="试题类型">
              <el-select
                v-model="formData.questionType"
                placeholder="请选择"
                prop="questionType"
                style="width: 99%"
              >
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="题目备注">
              <el-input
                v-model="formData.remarks"
                style="width: 99%"
                prop="remarks"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="formData.catalogID"
                prop="catalogID"
                placeholder="请选择"
                style="width: 99%"
              >
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="难度">
              <el-select
                v-model="formData.difficulty"
                placeholder="请选择"
                prop="difficulty"
                style="width: 99%"
              >
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业简称">
              <el-input
                v-model="formData.shortName"
                style="width: 99%"
                prop="shortName"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="formData.tags"
                prop="tags"
                placeholder="请选择"
                style="width: 99%"
              >
                <el-option
                  v-for="item in tagOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="方向">
              <el-select
                v-model="formData.direction"
                placeholder="请选择"
                prop="direction"
                style="width: 99%"
              >
                <el-option
                  v-for="(item,index) in directionOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="城市">
              <el-select
                v-model="formData.province"
                placeholder="请选择"
                prop="province"
                style="width: 46%; margin-right: 5px"
                @change="cityChange"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select
                v-model="formData.city"
                placeholder="请选择"
                style="width: 46%"
                prop="city"
              >
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" style="text-align: right">
              <el-input
                v-model="formData.keyword"
                style="width: 99%"
                prop="keyword"
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="录入人" style="text-align: right">
              <el-select
                v-model="formData.creatorID"
                placeholder="请选择"
                prop="creatorID"
                style="width: 99%"
              >
                <el-option
                  v-for="(item,index) in userOptions"
                  :key="index"
                  :label="item.username"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="filter()">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 总计 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 15px"
      />
      <!-- 表格 -->
      <el-table :data="questions">
        <el-table-column label="试题编号" prop="number" />
        <el-table-column label="学科" prop="subject" />
        <el-table-column label="目录" prop="catalogID" />
        <el-table-column
          label="题型"
          prop="questionType"
          :formatter="formatQuestionType"
        >
          <!-- <template v-solt="{row}" >
          {{row.questionType===1?'单选':(questionType===2?'多选':'简答')}}
        </template> -->
        </el-table-column>
        <el-table-column
          label="题干"
          prop="question"
          :formatter="delHtmlTag"
        />
        <el-table-column label="录入时间" width="220px">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          prop="difficulty"
          :formatter="formatDifficulty"
        >
          <!-- <template slot-scope="scope">
          {{scope.row.difficulty ==1?'简单':difficult==2?'一般':'困难'}}
        </template> -->
        </el-table-column>
        <el-table-column label="录入人" prop="creator" />
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button
              plain
              type="primary"
              size="small"
              circle
              icon="el-icon-view"
              title="预览"
              @click="openPreviewDialog(scope.row)"
            />
            <el-button
              plain
              type="success"
              size="small"
              circle
              icon="el-icon-edit"
              title="修改"
              @click="$router.push(`new?id=${scope.row.id}`)"
            />
            <el-button
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              title="删除"
              @click="delQuestion(scope.row)"
            />
            <el-button
              plain
              type="warning"
              size="small"
              circle
              icon="el-icon-check"
              title="加入精选"
              @click="addChoice(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-size="formData.pagesize"
        :current-page="formData.page"
        :page-sizes="[5, 10, 20, 50]"
        @current-change="changePager"
        @size-change="changeSize"
      />
    </el-card>
    <!-- 使用视频插件组件 -->
    <questionsPreview
      ref="questionsref"
      :questions-previewshow.sync="questionsPreviewshow"
    />
  </div>
</template>

<script>
import { simple as catlogList } from '@/api/hmmm/directorys'
import { simple as tagList } from '@/api/hmmm/tags.js'
import { simple as userList } from '@/api/base/users'

import { simple as subjectList} from '@/api/hmmm/subjects'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces as getCity, citys as getErJiDiQu } from '@/api/hmmm/citys'
import {
  list as questionList,
  remove as questionDel,
  choiceAdd
} from '@/api/hmmm/questions'
import questionsPreview from '../components/questions-preview.vue'
export default {
  name: 'QuestionsPage',
  components: {
    questionsPreview
  },
  data () {
    return {
      questionInfo: {},
      formData: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 10
      },
      questions: [],
      total: 0,
      // 学科选项
      subjectOptions: subjectList,
      // 难度选项
      diffOptions: difficulty,
      // 试题类型选项
      questionTypeOptions: questionType,
      // 标签选项
      tagOptions: [],
      // 城市
      cityOptions: getCity(),
      // 地区 当选择了城市的时候赋值
      areaOptions: null,
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 目录
      directoryOptions: [],
      questionsPreviewshow: false
    }
  },
  // created () {
  //   this.getQuestions()
  // },
  async created () {
    // 学科下拉选项
    const { data: subjectArr } = await subjectList()
    this.subjectOptions = subjectArr
    // console.log(this.subjectOptions);
    // console.log(subjectArr);
    // 用户
    const { data: userArr } = await userList()
    this.userOptions = userArr
    this.getQuestions()
  },
  methods: {
    async getQuestions () {
      const { data } = await questionList()
      // console.log(data)
      this.questions = data.items
      this.total = data.counts
      // console.log(data)
    },
    formatQuestionType (row, column, cellValue) {
      return cellValue === '1' ? '单选' : (cellValue === '2' ? '多选' : '简答')
    },
    formatDifficulty (row, column, cellValue) {
      return cellValue === '1' ? '简单' : (cellValue === '2' ? '一般' : '困难')
      //console.log(cellValue);
    },
    delHtmlTag (row, column, cellValue) {
      return cellValue.replace(/<[^>]+>/g, '') // 去掉所有的html标记
    },
    clear () {
      for (const key in this.formData) {
        if (key !== 'page' && key !== 'pagesize') this.formData[key] = null
      }
    },
    filter () {
      this.formData.page = 1
      this.getSubjects()
    },
    async getSubjects () {
      const { data: questionsData } = await questionList(this.formData)
      this.questions = questionsData.items
      this.total = questionsData.counts
    },
    changePager (newPage) {
      this.formData.page = newPage
      this.getSubjects()
    },
    pager (np) {
      this.requestParams.page = np
      this.getSubjects()
    },
    changeSize (newSize) {
      this.formData.page = 1
      this.formData.pagesize = newSize
      this.getSubjects()
    },
    async delQuestion (question) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await questionDel(question)
      this.$message.success('删除成功')
      this.getSubjects()
    },
    async addChoice (question) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await choiceAdd({ id: question.id, choiceState: 1 })
      this.$message.success('加入精选成功')
      this.getSubjects()
      this.$router.push({path: 'choice'})
    },
    // 点击预览显示视频插件
    openPreviewDialog (row) {
      this.$refs.questionsref.detail(row)

      this.questionsPreviewshow = true
    },
    async cityChange(){
      // console.log(this.formData.province);
      this.formData.city = null
      this.areaOptions = await getErJiDiQu(this.formData.province)
    },
    // async tagChange(){
    //   // this.formData.tags=null
    //   const {data}=await tagList()
    //   this.tagOptions = data 
    //   console.log(this.formData.subjectID);
    //   const res = await detail({id: this.formData.subjectID})
    //   // console.log(res)
    //   //console.log(this.tagOptions);
    // }
    async changeSubject (subjectID){
      // console.log(subjectID);
      this.formData.catalogID = null
      const res1 = await catlogList ({subjectID})
      this.directoryOptions = res1.data
      this.formData.tags = null
      const res2 = await tagList({subjectID})
      this.tagOptions = res2.data
      // console.log(data);
      // console.log(res);
    }
  }
}
</script>

<style scoped lang='scss'>
.container-questions {
  padding: 10px 15px;
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
.el-button--danger:focus {
  background: #fef0f0;
  color: #f56c6c !important;
  border-color: #fbc4c4;
}
.el-button--danger:hover {
  color: #fff !important;
  background: #f56c6c;
}
</style>
